<!-- 标题栏 -->
<template>
  <div class="titleBar-container">
    <div class="item line"></div>
    <div class="item title">
        {{ title }}
    </div>
    <div class="item">
        <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
    title:{
        tyep:String,
        required:true
    }
})


</script>

<style lang="less" scoped>
.titleBar-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 30px 0;
    .item{
        margin-right: 10px;
    }
    .line{
        width: 0.2vw;
        height: 40px;
        min-height: 30px;
        min-width: 5px;
        background-color: #000;
    }
    .title{
        font-size: 2em;
        font-weight: bold;
    }
}
</style>